Design Tokens

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Using Lightning Components? Read the Developer Guide on Styling with Design Tokens.

Background ColorBackground Color

Use these tokens for background colors only. Do not use these for border colors or text colors.

TokenExample
$button-color-background-primary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$card-wrapper-color-background
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-actionbar-icon-utility
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-alt
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-alt-2
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-alt-inverse
rgb(22, 50, 92)
#16325c
BISCAY
$color-background-backdrop
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-background-backdrop-tint
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-brand-primary
rgb(0, 112, 210)
#0070d2
BLUE_BACKGROUND_PRIMARY
$color-background-brand-primary-active
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-brand-primary-focus
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-brand-primary-hover
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-browser
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-button-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-button-success-active
rgb(4, 132, 75)
#04844b
SALEM
$color-background-button-success-hover
rgb(4, 132, 75)
#04844b
SALEM
$color-background-chrome-desktop
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-chrome-mobile
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-background-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$color-background-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-background-error
rgb(212, 80, 76)
#d4504c
VALENCIA
$color-background-error-dark
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-highlight
rgb(250, 255, 189)
#faffbd
LEMON_CHIFFON
$color-background-highlight-search
rgb(255, 240, 63)
#fff03f
GORSE
$color-background-image-overlay
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-background-indicator-dot
rgb(22, 50, 92)
#16325c
BISCAY
$color-background-info
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-input
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-active
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-checkbox
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-checkbox-disabled
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-background-input-checkbox-selected
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-input-disabled
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-input-error
rgb(255, 221, 225)
#ffdde1
PIPPIN
$color-background-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-modal
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-modal-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-modal-button
rgba(0, 0, 0, 0.07)
BLACK_TRANSPARENT_07
$color-background-modal-button-active
rgba(0, 0, 0, 0.16)
BLACK_TRANSPARENT_16
$color-background-notification
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-notification-badge
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-notification-badge-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-notification-badge-focus
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-badge-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-new
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-offline
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-background-org-switcher-arrow
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-payload
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-pill
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-post
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-primary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-reminder
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-reminder-hover
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-row-active
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-row-hover
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-row-new
rgb(217, 255, 223)
#d9ffdf
SNOWY_MINT
$color-background-row-selected
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-scrollbar
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-scrollbar-track
rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
$color-background-secondary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-selection
rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
$color-background-shade
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-shade-dark
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-background-spinner-dot
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-background-stencil
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-stencil-alt
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-background-temp-modal
rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-background-temp-modal-tint
rgba(43, 40, 38, 0.6)
PALETTE_DARK_GRAY_TRANSPARENT_60
$color-background-toast
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-toast-error
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-toast-success
rgb(4, 132, 75)
#04844b
SALEM
$color-background-toggle
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-background-toggle-active
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-toggle-active-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-toggle-disabled
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-background-toggle-hover
rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-background-utility-bar-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-utility-bar-hover
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-brand-darker
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-contrast-primary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-contrast-secondary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-foreground-primary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-picker-slider-thumb-color-background
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$page-header-color-background
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$popover-walkthrough-alt-image
/assets/images/popovers/popover-action.png
$popover-walkthrough-alt-nubbin-color-background
rgb(33, 92, 160)
#215ca0
#215ca0
$popover-walkthrough-color-background
rgb(3, 46, 97)
#032e61
#032e61
$popover-walkthrough-color-background-alt
rgb(22, 74, 133)
#164a85
#164A85
$popover-walkthrough-header-color-background
rgb(22, 74, 133)
#164a85
#164A85
$popover-walkthrough-header-image
/assets/images/popovers/popover-header.png
$progress-color-background-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$progress-color-border-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$table-color-background-header
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$table-color-background-header-hover
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1

Text ColorText Color

Use these tokens for text colors only. Do not use these for border colors or background colors.

TokenExample
$button-color-text-primary
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-action-label
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-action-label-active
Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-brand
Aa
rgb(21, 137, 238)
#1589ee
AZURE
$color-text-brand-primary
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-browser
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-browser-active
Aa
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-text-button-brand
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-brand-active
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-brand-disabled
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-brand-hover
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-default
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-active
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-disabled
Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-text-button-default-hint
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-button-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-inverse
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-button-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-customer
Aa
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-text-default
Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-error
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-icon-brand
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-icon-default-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default-disabled
Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-text-icon-default-hint
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-icon-default-hint-borderless
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-icon-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-inverse
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-icon-inverse-active
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-icon-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-icon-inverse-hint
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-icon-inverse-hint-hover
Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-icon-inverse-hover
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-icon-utility
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-input-disabled
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-input-focus-inverse
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-input-icon
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-inverse
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-inverse-active
Aa
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-text-inverse-hover
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-inverse-weak
Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-label
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-link
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-link-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-link-disabled
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-link-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-link-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-link-inverse
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-link-inverse-active
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-link-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-link-inverse-hover
Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-link-primary
Aa
rgb(0, 112, 210)
#0070d2
BLUE_TEXT_PRIMARY
$color-text-link-primary-active
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-link-primary-focus
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-link-primary-hover
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-modal
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-modal-button
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-pill
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-placeholder
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-placeholder-inverse
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-primary
Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-required
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-secondary
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-stage-left
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-success
Aa
rgb(2, 128, 72)
#028048
FUN_GREEN
$color-text-success-inverse
Aa
rgb(75, 202, 129)
#4bca81
EMERALD
$color-text-tab-label
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-tab-label-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-tab-label-disabled
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-tab-label-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-selected
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-tertiary
Aa
rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-text-toast
Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-toggle-disabled
Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-text-warning
Aa
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-text-warning-alt
Aa
rgb(132, 72, 0)
#844800
CINNAMON
$color-text-weak
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9

Border ColorBorder Color

Use these tokens for border colors only. Do not use these for background colors or text colors.

TokenExample
$button-color-border-primary
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$card-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$card-footer-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-brand-primary
rgb(0, 112, 210)
#0070d2
BLUE_BORDER_PRIMARY
$color-border-brand-primary-active
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-brand-primary-focus
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-brand-primary-hover
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-button-brand-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$color-border-button-default
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-button-inverse-disabled
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-border-canvas-element-selection
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-border-canvas-element-selection-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-border-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-border-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$color-border-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-border-error
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-error-alt
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-error-dark
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-icon-inverse-hint
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-border-icon-inverse-hint-hover
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-border-info
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-border-input
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-input-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-input-checkbox-selected-checkmark
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-input-disabled
rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
$color-border-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-border-offline
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-border-primary
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-reminder
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-border-row-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-row-selected-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-selection
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-selection-active
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-border-selection-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-separator
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-border-separator-alt
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-separator-alt-2
rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
$color-border-separator-inverse
rgb(42, 66, 108)
#2a426c
SAN_JUAN
$color-border-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-border-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-border-tab-active
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-tab-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-toggle-checked
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-stroke-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-brand-active
rgb(22, 50, 92)
#16325c
BISCAY
$color-stroke-brand-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-disabled
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-stroke-header-button
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$page-header-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$page-header-joined-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5

FontFont

Use these font weights to change how thin or heavy the weight is for our font.

TokenExample
$card-font-weight
Aa
700
$font-family-heading
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$font-family-text
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$font-weight-bold
Aa
700
$font-weight-light
Aa
300
$font-weight-regular
Aa
400
$form-label-font-size
Aa
.75rem
12px
$input-static-font-size
Aa
0.875rem
14px
$input-static-font-weight
Aa
400
$page-header-title-font-weight
Aa
700
$tabs-font-weight
Aa
700

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExample
$font-size-heading-large
Aa
1.5rem
FONT_SIZE_8
24px
$font-size-heading-medium
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-heading-small
Aa
.875rem
FONT_SIZE_4
14px
$font-size-heading-x-large
Aa
2rem
FONT_SIZE_9
32px
$font-size-heading-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-heading-xx-small
Aa
.625rem
FONT_SIZE_1
10px
$font-size-text-large
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-text-medium
Aa
1rem
FONT_SIZE_5
16px
$font-size-text-small
Aa
.8125rem
FONT_SIZE_3
13px
$font-size-text-x-large
Aa
1.25rem
FONT_SIZE_7
20px
$font-size-text-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-text-xx-small
Aa
.625rem
FONT_SIZE_1
10px

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExample
$opacity-5
0.5
$opacity-8
0.8

Line HeightLine Height

Use these tokens for changing the line-height of elements. Usually, the line-height-text is already inherited by default. Only set it if you need to apply it again.

TokenExample
$line-height-heading
Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1.25
$line-height-reset
Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1
$line-height-tab
Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
2.5rem
40px
$line-height-text
Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1.375

SpacingSpacing

Spacing tokens are used for padding, margins, and position coordinates. Border-width tokens are used for the border property.

TokenExample
$border-stroke-width-thick
2px
$border-stroke-width-thin
1px
$border-width-thick
2px
$border-width-thin
1px
$card-footer-padding
0.75rem 1rem
SPACING_SMALL SPACING_MEDIUM
12px 16px
$card-spacing-margin
0.75rem
SPACING_SMALL
12px
$component-spacing-margin
0.75rem
SPACING_SMALL
12px
$component-spacing-padding
1rem
SPACING_MEDIUM
16px
$spacing-large
1.5rem
SPACING_LARGE
24px
$spacing-medium
1rem
SPACING_MEDIUM
16px
$spacing-none
0
SPACING_NONE
$spacing-small
0.75rem
SPACING_SMALL
12px
$spacing-x-large
2rem
SPACING_X_LARGE
32px
$spacing-x-small
0.5rem
SPACING_X_SMALL
8px
$spacing-xx-large
3rem
SPACING_XX_LARGE
48px
$spacing-xx-small
0.25rem
SPACING_XX_SMALL
4px
$spacing-xxx-small
0.125rem
SPACING_XXX_SMALL
2px
$table-cell-spacing
0.25rem 0.5rem
SPACING_XX_SMALL SPACING_X_SMALL
4px 8px
$template-gutters
0.75rem
SPACING_SMALL
12px
$template-profile-gutters
8rem 0.75rem 0.75rem
8rem SPACING_SMALL SPACING_SMALL
128px 12px 12px

RadiusRadius

Use radius tokens to change the border-radius size (rounded corners).

TokenExample
$border-radius-circle
50%
$border-radius-large
.5rem
8px
$border-radius-medium
.25rem
4px
$border-radius-pill
15rem
240px
$border-radius-small
.125rem
2px
$page-header-border-radius
0.25rem
4px
$table-border-radius
0 0 0.25rem 0.25rem
0 0 4px 4px

SizingSizing

Use sizing tokens to set elements to our sizing scale. Size tokens can be used for the width and height properties. Square tokens are used for both width and height.

TokenExample
$flex-detail-panel
3
$flex-master-panel
7
$height-footer
3.75rem
60px
$height-header
3.125rem
50px
$height-input
1.875rem
30px
$height-overflow-start
144px
$height-pill
1.625rem
26px
$max-width-action-bar-with-labels
320px
$max-width-action-overflow-menu
512px
$size-large
25rem
400px
$size-medium
20rem
320px
$size-small
15rem
240px
$size-x-large
40rem
640px
$size-x-small
12rem
192px
$size-xx-large
60rem
960px
$size-xx-small
6rem
96px
$size-xxx-small
3rem
48px
$square-icon-large-boundary
3rem
48px
$square-icon-large-boundary-alt
5rem
80px
$square-icon-large-content
2rem
32px
$square-icon-medium-boundary
2rem
32px
$square-icon-medium-boundary-alt
2.25rem
36px
$square-icon-medium-content
1rem
16px
$square-icon-medium-content-alt
0.875rem
14px
$square-icon-small-boundary
1.5rem
24px
$square-icon-small-content
.75rem
12px
$square-icon-utility-large
1.5rem
24px
$square-icon-utility-medium
1.25rem
20px
$square-icon-utility-small
1rem
16px
$square-icon-x-small-boundary
1.25rem
20px
$square-icon-x-small-content
.5rem
8px
$square-icon-xx-small-boundary
1rem
16px
$square-tappable
2.75rem
44px
$square-tooltip-nubbin
1rem
16px
$width-stage-left
88%

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExample
$card-shadow
0 2px 2px 0 rgba(0, 0, 0, 0.1)
0 2px 2px 0 BLACK_TRANSPARENT_10
$page-header-shadow
0 2px 2px 0 rgba(0, 0, 0, 0.1)
0 2px 2px 0 BLACK_TRANSPARENT_10
$shadow-action-overflow-footer
0 -2px 4px #fafaf9
OFFSET_NONE -OFFSET_X_SMALLpx OFFSET_MEDIUMpx PALETTE_GRAY_2
$shadow-button-focus
0 0 3px #0070D2
OFFSET_NONE OFFSET_NONE OFFSET_SMALLpx SCIENCE_BLUE
$shadow-button-focus-inverse
0 0 3px #ecebea
OFFSET_NONE OFFSET_NONE OFFSET_SMALLpx PALETTE_GRAY_4
$shadow-docked
0 -2px 2px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE -OFFSET_X_SMALLpx OFFSET_X_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_16
$shadow-drag
0 2px 4px 0 rgba(0, 0, 0, 0.40)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx OFFSET_NONE BLACK_TRANSPARENT_40
$shadow-drop-down
0 2px 3px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_16
$shadow-focus-inset
0 0 2px 2px #1589EE inset
OFFSET_NONE OFFSET_NONE OFFSET_X_SMALLpx OFFSET_X_SMALLpx AZURE inset
$shadow-hard-primary
rgba(0, 0, 0, 0.1) 0 2px 0
BLACK_TRANSPARENT_10 0 2px 0
$shadow-header
0 2px 4px rgba(0, 0, 0, 0.07)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx BLACK_TRANSPARENT_07
$shadow-image
0 1px 1px rgba(0, 0, 0, 0.16)
OFFSET_NONE 1px 1px BLACK_TRANSPARENT_16
$shadow-inline-edit
0 2px 4px 4px rgba(0, 0, 0, 0.16)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx OFFSET_MEDIUMpx BLACK_TRANSPARENT_16
$shadow-reminder
0 2px 3px 0 rgba(0, 0, 0, 0.20)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_20
$shadow-soft-primary
rgba(0, 0, 0, 0.1) 0 2px 2px
BLACK_TRANSPARENT_10 0 2px 2px
$shadow-soft-primary-active
rgba(0, 0, 0, 0.20) 0 1px 1px
BLACK_TRANSPARENT_20 0 1px 1px
$shadow-soft-primary-hover
rgba(0, 0, 0, 0.20) 0 3px 6px
BLACK_TRANSPARENT_20 0 3px 6px

TimeTime

Use timing tokens for animation durations.

TokenExample
$duration-immediately
0.05s
$duration-instantly
0s
$duration-paused
3.2s
$duration-promptly
0.2s
$duration-quickly
0.1s
$duration-slide
0.25s
$duration-slowly
0.4s
$duration-toast-medium
9.6s
$duration-toast-short
4.8s

Media QueryMedia Query

Use media query tokens to set media query width ranges.

TokenExample
$mq-large
only screen and (min-width: 64.0625em)
$mq-medium
only screen and (min-width: 48em)
$mq-medium-landscape
only screen and (min-width: 48em) and (min-aspect-ratio: 4/3)
$mq-small
only screen and (max-width: 47.9375em)

Z-indexZ-index

Use z-index tokens to set the z order layering of elements.

TokenExample
$z-index-deepdive
-99999
$z-index-default
1
$z-index-dialog
6000
$z-index-docked
4
$z-index-dropdown
7000
$z-index-modal
9000
$z-index-overlay
8000
$z-index-popup
5000
$z-index-reminder
8500
$z-index-spinner
9050
$z-index-sticky
100
$z-index-toast
10000